<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript">
        //打印列表
        $(function() {
            $.ajax({
                url:"allBook",
                method:"get",
                success:function(result) {
                    {# json字符串改json对象 #}
                    jsonObj=JSON.parse(result);
                    var str1="";
                    var str2="";
                    $.each(jsonObj,function(index,row) {
                        if(index<jsonObj.length/2){
                            str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book1").html(str1);
                        }
                        else{
                            str2+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book2").html(str2);
                        }
                    });
                },
                error:function (e) {
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        });
        function allbook() {
            $.ajax({
                url:'allBook',
                method: "get",
                success:function (result){
                    jsonObj=JSON.parse(result);
                    var str1="";
                    var str2="";
                    $.each(jsonObj,function(index,row) {
                        if(index<jsonObj.length/2){
                            str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book1").html(str1);
                        }
                        else{
                            str2+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book2").html(str2);
                        }
                    });
                },
                error:function (e){
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        }
        function xuanbook() {
            $.ajax({
                url:'/xuanBook',
                method: "get",
                success:function (result){
                    jsonObj=JSON.parse(result);
                    var str1="";
                    var str2="";
                    $.each(jsonObj,function(index,row) {
                        if(index<jsonObj.length/2){
                            str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book1").html(str1);
                        }
                        else{
                            str2+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book2").html(str2);
                        }
                    });
                },
                error:function (e){
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        }
        function xiubook() {
            $.ajax({
                url:'/xiuBook',
                method: "get",
                success:function (result){
                    jsonObj=JSON.parse(result);
                    var str1="";
                    var str2="";
                    $.each(jsonObj,function(index,row) {
                        if(index<jsonObj.length/2){
                            str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book1").html(str1);
                        }
                        else{
                            str2+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book2").html(str2);
                        }
                    });
                },
                error:function (e){
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        }
        function dubook() {
            $.ajax({
                url:'duBook',
                method: "get",
                success:function (result){
                    jsonObj=JSON.parse(result);
                    var str1="";
                    var str2="";
                    $.each(jsonObj,function(index,row) {
                        if(index<jsonObj.length/2){
                            str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book1").html(str1);
                        }
                        else{
                            str2+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book2").html(str2);
                        }
                    });
                },
                error:function (e){
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        }
        function chuanbook() {
            $.ajax({
                url:'chuanBook',
                method: "get",
                success:function (result){
                    jsonObj=JSON.parse(result);
                    var str1="";
                    var str2="";
                    $.each(jsonObj,function(index,row) {
                        if(index<jsonObj.length/2){
                            str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book1").html(str1);
                        }
                        else{
                            str2+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book2").html(str2);
                        }
                    });
                },
                error:function (e){
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        }
        function wangbook() {
            $.ajax({
                url:'wangBook',
                method: "get",
                success:function (result){
                    jsonObj=JSON.parse(result);
                    var str1="";
                    var str2="";
                    $.each(jsonObj,function(index,row) {
                        if(index<jsonObj.length/2){
                            str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book1").html(str1);
                        }
                        else{
                            str2+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book2").html(str2);
                        }
                    });
                },
                error:function (e){
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        }
        function kebook() {
            $.ajax({
                url:'keBook',
                method: "get",
                success:function (result){
                    jsonObj=JSON.parse(result);
                    var str1="";
                    var str2="";
                    $.each(jsonObj,function(index,row) {
                        if(index<jsonObj.length/2){
                            str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book1").html(str1);
                        }
                        else{
                            str2+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                "<br><hr class='layui-border-orange'><br>"
                            $("#book2").html(str2);
                        }
                    });
                },
                error:function (e){
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        }
        function selectBook() {
            $.ajax({
                url:'selectBook',
                method: "post",
                data:$("#f1").serialize(),
                success:function (result){
                    if(result=="0")
                        layer.msg("暂无", {
                            time: 3000,
                            icon: 2
                        });
                    else {
                        jsonObj=JSON.parse(result);
                        var str1="";
                        var str2="";
                        $.each(jsonObj,function(index,row) {
                            if(jsonObj.length==1){
                                str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                    "<br><hr class='layui-border-orange'><br>"
                                $("#book1").html(str1);
                                $("#book2").html(str2);
                            }
                            else {
                                if(index<jsonObj.length/2){
                                    str1+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                        "<br><hr class='layui-border-orange'><br>"
                                    $("#book1").html(str1);
                                }
                                else{
                                    str2+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"-----"+row[2]+"</label></li>"+
                                        "<br><hr class='layui-border-orange'><br>"
                                    $("#book2").html(str2);
                                }
                            }
                        });
                    }
                },
                error:function (e){
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });
        }
        function speak() {
            layer.msg("您请说")
            $.ajax({
                url:"speak",
                success:function (result){
                    jsonObj=JSON.parse(result)

                    $("#title").val(jsonObj);
                }
            })
        }
    </script>
</head>
<body>
<div class="layui-elem-quote">
    图书列表
</div>
<div>
    <form method="post" id="f1" name="f1" class="layui-form">
        <div class="layui-row">
            <div class="layui-col-md3" >
                <label class="layui-form-label">查询方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="sc" value="bname" title="书名" checked>
                    <input type="radio" name="sc" value="author" title="作者">
                </div>
            </div>
            <div class="layui-col-md5" >
                <div class="layui-input-block">
                    <input type="text" name="title" id="title" placeholder="请输入" class="layui-input" style="width: 80%">
                </div>
            </div>
            <div class="layui-col-md2">
                <a href="javascript:speak()" class="layui-btn"><span class="layui-icon layui-icon-search"></span> 语音输入</a>
            </div>
            <div class="layui-col-md2" >
                <a href="javascript:selectBook()" class="layui-btn"><span class="layui-icon layui-icon-search"></span> 查询</a>
                <a href="javascript:f1.reset()" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-fonts-clear"></span> 重置</a>
            </div>
        </div>
    </form>
</div>
<br>
<div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<br>
<div class="layui-form-item">
    <label class="layui-form-label">选择类型</label>
    <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary"><a href="javascript:allbook()">全部</a></button>
    <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary"><a href="javascript:xuanbook()">玄幻</a></button>
    <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary"><a href="javascript:xiubook()">修真</a></button>
    <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary"><a href="javascript:dubook()">都市</a></button>
    <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary"><a href="javascript:chuanbook()">穿越</a></button>
    <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary"><a href="javascript:wangbook()">网游</a></button>
    <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary"><a href="javascript:kebook()">科幻</a></button>
</div>
<div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<br>

<div class="layui-row">
    <div class="layui-col-md5">
        <div class="layui-panel">
            <ul id="book1">
            </ul>
        </div>
    </div>
    <div class="layui-col-md5">
        <div class="layui-panel">
            <ul id="book2">
            </ul>
        </div>
    </div>
</div>

<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });
</script>
</body>
</html>